<template>
  <div>
    <h1>v-for使用注意</h1>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="add">修改</button>
  </div>
</template>

<script>
/**
 * 修改数据不能触发视图刷新情况：
1. 不改变原数组的修改
2. 使用数组索引修改值
 */
export default {
  data() {
    return {
      list: [1, 2, 3],
    };
  },
  methods: {
    add() {
      // 可以驱动视图更新
      // this.list.push(Math.floor(Math.random() * (10 - 5 + 1) + 5));

      // filter不能更新视图，需要给数组重新赋值
      // this.list = this.list.filter((item) => item > 1);

      // 通过索引修改值，不能更新视图，因为框架无法监控到变化(Vue2存在，Vue3修复)
      // this.list[1] = 100;
      // 解决方案：this.$set(数组, 索引, 新值)
      this.$set(this.list, 1, 10);
    },
  },
};
</script>

<style>
</style>